<template>
  <footer>
    <div class="footer-info">
      <ul>
        <li>
          <dt>购物指南</dt>
          <dd>购物流程</dd>
          <dd>会员介绍</dd>
          <dd>常见问题</dd>
          <dd>生活旅行</dd>
          <dd>会员领福利</dd>
        </li>
        <li>
          <dt>合作伙伴</dt>
          <dd>某某集团</dd>
          <dd>某某集团</dd>
          <dd>某某集团</dd>
          <dd>某某集团</dd>
        </li>
        <li>
          <dt>联系我们</dt>
          <dd>
            <p>市场部</p>
            <p>tel：15701332150</p>
            <p>邮箱：marketing@angelpalace.com.cn</p>
          </dd>
          <dd>
            <p>人事部</p>
            <p>tel：15210180422</p>
            <p>邮箱：hr@angelpalace.com.cn</p>
          </dd>
        </li>
        <li>
          <dt>移动端</dt>
          <p>
            <i>
              <img src="@/assets/imgs/yd1.png" alt />
            </i>
            <i>
              <img src="@/assets/imgs/yd2.png" alt />
            </i>
            <i>
              <img src="@/assets/imgs/yd3.png" alt />
            </i>
            <i>
              <img src="@/assets/imgs/yd4.png" alt />
            </i>
            <i>
              <img src="@/assets/imgs/yd5.png" alt />
            </i>
          </p>

          <p class="footer-logo">
            <img src="@/assets/imgs/logo.png" alt />
          </p>
        </li>
      </ul>
    </div>
    <div class="copy">
      <p class="footer-copy">
        <span>Copyright © 2019 www.angelpalace.com.cn All Rights Reserved.</span>
        <span>京ICP备17058601号</span>
      </p>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
footer {
  width: 100%;
  min-height: 402px;
  text-align: center;
  background-color: #f4f4f4;
  border-top: 2px solid #d6d6d6;
  ::before {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
  }
  .footer-info {
    width: 1200px;
    height: 334px;
    margin: 0 auto;
    background-color: #f4f4f4;
    ul {
      margin-top: 43px;
      font-size: 24px;
      color: #333333;
      li {
        float: left;
        dt {
          margin-bottom: 24px;
        }
      }
      li:nth-child(1) {
        margin-right: 176px;
        dd {
          font-size: 18px;
          color: #666666;
          text-align: left;
          margin-bottom: 16px;
        }
      }
      li:nth-child(2) {
        margin-right: 238px;
        dd {
          font-size: 18px;
          color: #666666;
          text-align: left;
          margin-bottom: 16px;
        }
      }
      li:nth-child(3) {
        dt {
          text-align: left;
        }
        dd {
          font-size: 16px;
          color: #666666;
          text-align: left;
          margin-bottom: 16px;
        }
      }
      li:nth-child(4) {
        margin-left: 110px;
        p {
          display: flex;
          i {
            margin-right: 17px;
          }
          i:nth-child(1) {
            margin-top: 2px;
          }
          i:last-child {
            margin-top: 3px;
            margin-right: 0;
          }
        }

        .footer-logo {
          margin-top: 76px;
          margin-left: 37px;
        }
      }
    }
  }
  .copy {
    border-top: 2px solid #d6d6d6;
  }
  .footer-copy {
    width: 1200px;
    height: 68px;
    margin: 0 auto;
    margin-bottom: 2px;
    font-size: 18px;
    line-height: 68px;
    color: #999999;
    span:nth-child(1) {
      float: left;
    }
    span:nth-child(2) {
      float: right;
    }
  }
}
</style>

<script>
/*eslint-disable*/
export default {};
</script>